<template>
  <div class="inventoryList auditCmpt">
    <!-- 查询表单 -->
    <div class="form-baseinfo">
      <LPSearchBar
        v-model="searchModel"
        :search-data="searchData"
        label-width="100px"
        @handleSearchSubmit="handleSearchSubmit"
        @handleSearchReset="handleSearchReset"
      />
    </div>
    <div class="form-baseinfo">
      <div class="btn_area">
        <el-button size="medium" type="primary" @click="exportInfo">导出数据</el-button>
        <el-button size="medium" type="primary" @click="syncInventory">同步库存</el-button>
        <el-button
          v-hasPermi="['LaborProtection.ProductInventory.Create']"
          size="medium"
          type="primary"
          @click="insertCommodity"
        >
          库存调整
        </el-button>
        <!-- <span style="font-size: 16px; margin-left: 100px">仓库类型：</span> -->
        <!-- <el-radio-group v-model="radio" size="" @change="radioChange">
          <el-radio :label="0">在线仓库</el-radio>
          <el-radio :label="1">离线仓库</el-radio>
        </el-radio-group> -->
        <el-select v-model="radio" class="inventoryType" placeholder="请选择仓库类型" @change="radioChange">
          <el-option label="在线仓库" :value="0" />
          <el-option label="离线仓库" :value="1" />
        </el-select>
      </div>
      <!-- 表格列表 -->
      <LPTablePage
        :show-index="false"
        :show-indexfixed="false"
        index-label="顺序"
        :table-data="tableData"
        :table-column="tableColumn"
        :total="total"
        :current-page="currentPage"
        class="table"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import { getCategoryInfo } from '@/api/LaborProtection/categoryInfo'
import { getProductInventoryList } from '@/api/LaborProtection/productInventory'
import { AutoGetStore, AutoExecStore, AutoExecRuleStore } from '@/api/LaborProtection/inventory'
import { GetProductInventoryExcel } from '@/api/LaborProtection/export'
import { download } from '@/utils/lpUtils'
import LPTablePage from '@/components/LPTablePage/index.vue'
import LPSearchBar from '@/components/LPSearchBar/index.vue'

export default {
  components: { LPSearchBar, LPTablePage },
  data() {
    return {
      searchModel: {},
      searchData: [
        {
          label: '',
          placeholder: '物料类型',
          prop: 'QCategoryNo',
          type: 'select',
          option: []
        },
        {
          label: '',
          placeholder: '物料名称',
          prop: 'pTitle'
        },
        {
          label: '',
          placeholder: '物料编码',
          prop: 'pNo'
        }
      ],
      // 列表数据
      tableData: [],
      // 表格字段
      tableColumn: [
        { label: '物料类型', prop: 'pClassName', width: 220 },
        { label: '物料名称', prop: 'pTitle', width: 220 },
        { label: '物料编码', prop: 'pNo', width: 150 },
        { label: '计量单位', prop: 'pUnit', width: 150 },
        { label: '劳保库存', prop: 'plbQuantity', width: 150 },
        { label: '仓库库存', prop: 'pckQuantity', width: 180 },
        { label: '操作时间', prop: 'modifyTime', width: 200 }
      ],
      radio: 0,
      total: 0,
      currentPage: 1,
      pageSize: 10,
      bigType: [],
      centreType: [],
      smallType: [],
      // 详情是否弹窗
      dialogVisible: false
    }
  },
  mounted() {
    if (localStorage.getItem('warehouseType') == null) {
      this.radio = 0
    } else {
      this.radio = 1
    }
    this.getList()
    this.getCategoryInfo(1)
    this.getCategoryInfo(2)
    this.getCategoryInfo(3)
  },
  methods: {
    setDropDownStructure(maps) {
      return maps.map((item) => {
        return {
          label: item.cName,
          value: item.categoryNo
        }
      })
    },
    /**
     *  1：大类 2：中类 3：小类
     * @param {*} type
     */
    getCategoryInfo(type) {
      const data = {
        CCLass: type,
        SkipCount: 0
      }
      getCategoryInfo(data).then((res) => {
        if (!res.error) {
          if (type == 1) {
            this.bigType = res.items
          } else if (type == 2) {
            this.centreType = this.setDropDownStructure(res.items)
          } else {
            this.smallType = this.setDropDownStructure(res.items)
          }
        }
        this.searchData.forEach((item) => {
          if (item.label == '物料类型') {
            item.option = this.centreType
          }
        })
      })
    },
    radioChange(v) {
      if (v == 0) {
        localStorage.removeItem('warehouseType')
      } else {
        localStorage.setItem('warehouseType', '0')
      }
    },
    // 查询按钮
    handleSearchSubmit() {
      this.currentPage = 1
      this.getList()
    },
    // 重置按钮
    handleSearchReset() {
      this.handleSearchSubmit()
    },
    // 获取列表
    getList() {
      // this.getCategoryInfo(1);
      // this.getCategoryInfo(2);
      // this.getCategoryInfo(3);
      const params = {
        ...this.searchModel,
        SkipCount: this.currentPage,
        MaxResultCount: this.pageSize
      }
      getProductInventoryList(params).then((res) => {
        if (!res.error) {
          this.tableData = res.items
          this.total = res.totalCount
        }
      })
    },
    exportInfo() {
      const params = {
        ...this.searchModel
      }
      GetProductInventoryExcel(params).then((res) => {
        download(res, '库存列表')
      })
    },
    handleSizeChange(v) {
      this.pageSize = v
      this.currentPage = 1
      this.getList()
    },
    handleCurrentChange(v) {
      this.currentPage = v
      this.getList()
    },
    syncInventory() {
      const data = {}
      AutoGetStore(data)
        .then((res) => {
          if (!res.error) {
            const data1 = {
              limit: 1000000
            }

            AutoExecRuleStore(data1)
              .then((res1) => {
                this.$message.success('同步成功')
                this.getList()
                AutoExecStore(data1)
                  .then((res1) => {
                    this.$message.success('同步成功')
                    this.getList()
                  })
                  .catch((err) => {
                    this.$message.error('同步超时')
                  })
              })
              .catch((err) => {
                this.$message.error('同步超时')
              })
          }
        })
        .catch((err) => {
          this.$message.error('同步超时')
        })
    },
    insertCommodity() {
      this.$router.push({
        path: './control'
      })
    }
  }
}
</script>

<style lang="scss">
.el-form-item__label {
  font-weight: normal;
}

.el-dialog__body {
  padding-top: 0px;
}

.el-divider {
  margin-top: 5px;
}
</style>

<style lang="scss" scoped>
.auditCmpt {
  display: flex;
  flex-direction: column;
  background-color: #f0f2f5;
  .form-baseinfo:first-child {
    margin: 20px, 0, 20px, -10px;
    border-radius: 3px;
  }
  .form-baseinfo:last-child {
    background-color: #fff;
    .btn_area {
      padding: 0.2rem;
      border-top-left-radius: 3px;
      border-top-right-radius: 3px;
    }
  }
}
.inventoryType {
  width: 118px;
  padding-left: 12px;
}
.inventoryList {
  .form-baseinfo {
    ::v-deep .search-bar input.el-input__inner {
      width: 2rem;
    }
  }

  ::v-deep .table {
    .red {
      color: $high_risk_color;
    }
  }
}
</style>
